<template>
  <div>
    <div class="flex justify-between align-center p-40">
      <div>
        <p class="fs-24">您好,{{ msg }}</p>
        <h1 class="fs-40 mt-10">万锋互联科技有限公司</h1>
      </div>
      <i class="iconfont icon-a-001_tongzhi fs-40"></i>
    </div>
    <custom-input v-model="msg" />
    <!-- <custom-input icon="icon-mimaguanli" holder="请输入密码" /> -->
    <div class="p-40">
      <van-swipe class="banner" :loop="false">
        <van-swipe-item>
          <img src="../assets/img/1.png" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/img/2.png" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-grid :column-num="4">
      <van-grid-item
        v-for="item in cateList"
        :key="item.objectId"
        :icon="item.icon"
        :text="item.name"
      />
      <van-grid-item
        :icon="require('../assets/img/home_grid5.png')"
        text="更多"
      />
    </van-grid>
    <div class="wrapper" ref="wrap">
      <div
        class="p-40 content flex"
        ref="cont"
        :style="{ width: `${34.3 * 8}rem` }"
      >
        <job-item is-hot v-for="item in 8" :jdata="joblist[0]" />
      </div>
    </div>

    <div class="line">
      <div class="dot" :style="{ transform: `translateX(${move}px)` }"></div>
    </div>

    <div class="p-40">
      <job-item v-for="item in joblist" :jdata="item" />
    </div>
  </div>
</template>

<script>
import { catogoryGet, jobGet } from "@/api/job";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      cateList: [],
      msg: "Hello",
      move: 0,
      joblist: [],
    };
  },
  created() {
    catogoryGet().then((res) => {
      this.cateList = res.data.results;
    });

    jobGet().then((res) => {
      this.joblist = res.data.results;
    });
  },
  mounted() {
    let { wrap, cont } = this.$refs; //获取容器DOM
    let wrapWidth = wrap.clientWidth; //获取容器宽度
    let contWidth = cont.clientWidth;
    let maxScroll = contWidth - wrapWidth; //最大滚动距离
    console.log("最大滚动距离", maxScroll);
    let bs = new BScroll(wrap, {
      scrollX: true, //开启横向滚动
      probeType: 3, //开启实时滚动监听
    });
    bs.on("scroll", (position) => {
      console.log("实时滚动距离", position);
      this.move = -(position.x / maxScroll) * 180;
    });
  },
};
</script>

<style lang="scss" scoped>
.banner {
  .van-swipe-item {
    height: 32rem;
    width: 67rem;
    overflow: hidden;
  }
  img {
    width: 67rem;
  }
}
.wrapper {
  overflow-x: hidden;
}

.line {
  width: 200px;
  height: 6px;
  background-color: #333;
  margin: auto;
  overflow: hidden;
  .dot {
    width: 20px;
    height: 100%;
    background-color: orange;
  }
}
</style>
